<template>
  <el-dialog title="导出数据" :visible.sync="show" @close="close">
    <el-transfer :data="data" :titles="['字段列表','已选字段']"
                 v-model="value" @right-check-change="rightCheck"
                 target-order="push">
      <el-button slot="right-footer" icon="el-icon-arrow-up" circle :disabled="upDownDisable" @click="upData">
      </el-button>
      <el-button slot="right-footer" icon="el-icon-arrow-down" circle :disabled="upDownDisable" @click="downData">
      </el-button>
    </el-transfer>
    <div slot="footer">
      <el-radio v-model="fileType" label="xls">导出到Excel</el-radio>
      <el-radio v-model="fileType" label="csv">导出到CSV</el-radio>
      <el-button @click="exportFile">导出</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import index from "../../config";
    import {baseUrl} from "../../api/fetch";
    import { Loading } from 'element-ui';
    export default {
        props:{
            props:Array,
            outBtn:Object,
            exportUrl:String,
            conditions: Array,
            status: Number
        },
        data() {
            const generateData = _ => {
                const data = [];
                for (let i = 0; i < this.props.length; i++) {
                    if (!this.props[i].searchOnly){
                        data.push({
                            key: this.props[i].label,
                            label: this.props[i].label,
                        });
                    }
                }
                return data;
            };
            return{
                submit:{},
                show:false,
                data:generateData(),
                value:[],
                upDownDisable:true,
                tempSelectionKeys:[],
                fileType:'xls',
                loading: null
            }
        },
        methods:{
            close() {
                this.$emit("close",null)
            },
            upData(){
                if(this.tempSelectionKeys.length > 1){
                    this.$message({
                        type: 'warning',
                        message: '仅支持单选调顺序'
                    });
                    return ;
                }
                let indexNum = 0;
                indexNum = this.value.indexOf(this.tempSelectionKeys[0])
                if(indexNum > 0){
                    this.value.splice(indexNum - 1, 0, this.tempSelectionKeys[0]);
                    this.value.splice(indexNum + 1, 1);

                    console.log(this.value)
                }
            },
            downData(){
                if(this.tempSelectionKeys.length > 1){
                    this.$message({
                        type: 'warning',
                        message: '仅支持单选调顺序'
                    });
                    return ;
                }
                let indexNum = 0;
                for(let i=0; i<this.tempSelectionKeys.length; i++){
                    indexNum = this.value.indexOf(this.tempSelectionKeys[i]);
                    if(indexNum > -1 && indexNum != this.value.length - 1){
                        this.value.splice(indexNum + 2, 0, this.tempSelectionKeys[i]);
                        this.value.splice(indexNum, 1);
                    }
                }
            },
            rightCheck(selectionKeys, changeKeys) {
                this.tempSelectionKeys = selectionKeys;
                if (selectionKeys.length > 0) {
                    this.upDownDisable = false;
                } else {
                    this.upDownDisable = true;
                }
            },
            exportFile() {
                let url = baseUrl+this.exportUrl+"?exportFileType="+this.fileType;
                for (let i=0;i<this.value.length;i++) {
                    if (this.value[i].indexOf('&')) {
                        this.value[i]=this.value[i].replace('&','%26')
                    }
                    url = url+"&columnNames="+this.value[i]
                }
                if (this.conditions) {
                    this.conditions.forEach((item, i) => {
                      if (item.checked != undefined && item.value != undefined) {
                        if (item.checked) {
                            if(item.value==true){
                                item.value=1
                            }else if(item.value==false){
                                item.value=0
                            }
                          url += "&" + (item.queryProp?item.queryProp:item.prop) + "=" + item.value
                        }
                      }
                    });
                }
                let els = document.getElementsByClassName('el-dialog')
                if (els.length > 0) {
                  this.loading = Loading.service({target: els[els.length - 1], fullscreen: false})
                }
                console.log(url, 'url999999');
                url = url+"&status="+this.status
                this.$http.export(url).finally(() => {
                  if (this.loading) {
                    this.loading.close()
                  }
                })
            }
        },
        watch:{
            outBtn(newVal,oldVal) {
                this.show = newVal==this.$config.BTNS.EXPORT
            }
        }
    }
</script>

<style lang="less" scoped>
  /deep/.el-dialog{
    width: fit-content;
  }
  /deep/.el-checkbox__label{
    width: 90%;
  }
</style>
